﻿<div>
    @foreach (var align in _alignments)
    {
        <MContainer Class="surface-container-lowest mb-6">
            <MRow Align="@align"
                  NoGutters
                  Style="height: 150px;">
                @for (int i = 0; i < 3; i++)
                {
                    <MCol>
                        <MCard Class="pa-2"
                               Outlined
                               Tile>
                            One of three columns
                        </MCard>
                    </MCol>
                }
            </MRow>
        </MContainer>
    }

    <MContainer Class="surface-container-lowest">
        <MRow NoGutters
              Style="height: 150px;">
            @foreach (var align in _alignments)
            {
                <MCol Align="@align">
                    <MCard Class="pa-2"
                           Outlined
                           Tile>
                        One of three columns
                    </MCard>
                </MCol>
            }
        </MRow>
    </MContainer>
</div>

@code{
    private string[] _alignments = new string[]
    {
        "start",
        "center",
        "end"
    };
}
